<template>
    <div style="height: 100vh; background-color: #f2f2f2;">
        <div class="van-nav-bar__content bg" style="background-color: white;">
            <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow"><!----></i><span
                    class="van-nav-bar__text" @click="Loss">返回</span></div>
            <div class="van-nav-bar__title van-ellipsis"></div>
        </div>
        <van-tabs v-model="active" @click="lucy">
            <van-tab title="未使用"> </van-tab>
            <van-tab title="已使用"></van-tab>
            <van-tab title="已过期"></van-tab>
        </van-tabs>
        <div>
            <div class="discount">
                <div style="color: white;">4554</div>
                <div v-for="(item, index) in listname">
                    <div class="num1" v-for="(item, index) in item">
                    <!-- {{ item }} -->
                    <h2>
                        <div style="display: flex;">
                            <div style="width: 30%;"><span style="font-size: 14px;">￥</span><span>{{ item.discount }}元</span></div><div>
                            <span
                            style="color: black; font-size: 18px;">{{ item.name }}</span>
                        </div>
                        </div>
                        <span style="display: block; font-size: 12px; color: #969799;">{{ item.desc }}-{{ item.tag
                        }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有效期：至{{ item.endTime }}</span>
                    </h2>
                </div>
                </div>
                <div style="color: white;">
                    5454
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mylistssss} from "@/api/index"
// import { threadId } from "worker_threads"
export default {
    name: 'tacknikename',
    data() {
        return {
            active: 0,
            listname:[]
        }
    },
    methods: {
        lucy() {
            localStorage.setItem("nikename", this.active)
            mylistssss({status:this.active,page:1,limit:10}).then(res => {
                this.listname = []
            console.log(res.data.data.list)
            this.listname.push(res.data.data.list)
            console.log(this.listname)
        })

        },
        Loss() {
            this.$router.go(-1)
        },
    },
    mounted() {
        var add = localStorage.getItem("nikename")
        console.log(add)
        this.active = Number(add)
        mylistssss({status:this.active,page:1,limit:10}).then(res => {
            console.log(res.data.data.list)
            this.listname.push(res.data.data.list)
            console.log(this.listname)
        })
    }

}
</script>
<style lang="scss">
.discount {
    width: 100%;
    // height: 240px;
    background-color: white;
    margin-top: -15px;

    .num1 {
        width: 90%;
        margin-left: 50%;
        transform: translateX(-50%);
        height: 100px;
        border: 1px solid red;
        margin-top: 15px;

        h2 {
            // position: relative;
            padding: 10px 0 0 20px;

            span {
                color: red;
                font-weight: 500;
            }
        }
    }
}
</style>